<template>

	<view class="container">
		<uni-nav-bar style="position: fixed;left: 0;right: 0;top:0;height: 108rpx;z-index: 100;" left-icon="left"
			:statusBar="true" :shadow="true" left-text="返回" @clickLeft="back" @clickRight="handle(['fade', 'zoom-in'])">

			<template v-slot:default>
				<text style="font-size: 28rpx;font-weight: 500;">组物资申请</text>
			</template>
			<template v-slot:right>
				<text style="font-size: 28rpx;font-weight: 500;">{{isSearch?'取消':'搜索'}}</text>
			</template>
		</uni-nav-bar>

		<!-- 		<view class="legend">
			<view class="legend-item" v-for="(item,index) in legend" :key="index">
				
				<text :style="{display:'block',background:item.color,width:'80rpx',height:'28rpx'}"></text>
				<text >{{item.text}}</text>
			</view>
		</view> -->

		<view class=""
			style="height: 44px;position: fixed;left: 0;right: 0;top: 148rpx;background-color: #EEE;z-index: 100;">
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSearch">
				<uni-forms v-if="isSearch">
					<uni-forms-item style="line-height: 88rpx;height: 88rpx;">
						<view class=""
							style="display: flex;align-items: center;justify-content: space-between;padding: 0 38rpx;">
							<uni-easyinput type="search" style="display: inline-block;"
								placeholder="请输入搜索内容"></uni-easyinput>
							<text style="display: inline-block;width: 100rpx; text-align: center;">搜索</text>
						</view>
					</uni-forms-item>
				</uni-forms>
			</uni-transition>
			<!-- <button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button> -->



			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show">
				<view class="tabs" v-show="!isSearch">
					<view class="tabs-item" v-for="(item,index) in legend" @tap="changeHandle(index)">
						<text :style="{color: currentIndex === index?item.color:''}">{{item.text}}</text>
					</view>

					<view class="tabs-bottom-line" :style="{left:48 + (currentIndex*134 -6) + 'rpx',
				backgroundColor:legend[currentIndex].color}"></view>


				</view>
			</uni-transition>
		</view>
		<view class="content" style="padding: 240rpx 0 50rpx;">

			<view class="box-group" v-if="currentIndex==0">
				<view class="box-item" v-for="(item,index) in goodsData" :key="index"
					:style="{boxShadow: `10rpx 0 1rpx ${legend[currentIndex].color} inset`,border:`1px solid ${legend[currentIndex].color}` }" @tap="openRecord(item)">
					<uni-swipe-action class="action-item">

						<uni-swipe-action-item class="action-item" :disabled="!(currentIndex==0)"
							:right-options="options" @click="onClick($event,item)" @change="change">
							<view class="list" style="position: relative;">
								<view class="left">
									<!-- <image style="width: 100rpx; height: 100rpx; " mode="widthFix"
										src="../../static/icons/sy.png"></image> -->
									<!-- <img :src="getImg('sy.png')" alt="图片" srcset="" style="width: 50px;"/> -->
									<view class="text">
										<text style="font-size: 28rpx;display: block;">{{item.wzname}}</text>

										<text style="font-size: 20rpx;display: block;">总数量：{{item.zsl}}</text>
										<text style="font-size: 20rpx;display: block;">剩余数量：{{item.sysl}}</text>
										<text style="font-size: 20rpx;display: block;">单位：{{item.dw}}</text>
									</view>
								</view>
								<view class="right">
									<view class="text">
										<text
											style="font-size: 28rpx;display: block;visibility: hidden;">checkbox</text>
										<text style="font-size: 20rpx;display: block;">类型：{{item.lx}}</text>

										<text style="font-size: 20rpx;display: block;">规格：{{item.gg}}</text>
										<text style="font-size: 20rpx;display: block;visibility: hidden;">单位：{{item.dw}}</text>

									</view>


								</view>
								<!-- <checkbox :value="1" checked style="position: absolute;right: 0;top: 0;" /> -->
							</view>

						</uni-swipe-action-item>

					</uni-swipe-action>
				</view>
			</view>
			<view class="box-group" v-if="currentIndex==1">
				<view class="box-item" v-for="(item,index) in useGoodsData" :key="index"
					:style="{boxShadow: `10rpx 0 1rpx ${legend[currentIndex].color} inset`,border:`1px solid ${legend[currentIndex].color}` }">
					<uni-swipe-action class="action-item">

						<uni-swipe-action-item class="action-item" :disabled="!(currentIndex==0)"
							:right-options="options" @click="onClick" @change="change">
							<view class="list" style="position: relative;">
								<view class="left">
									<!-- <image style="width: 100rpx; height: 100rpx; " mode="widthFix"
										src="../../static/icons/sy.png"></image> -->
									<!-- <img :src="getImg('sy.png')" alt="图片" srcset="" style="width: 50px;"/> -->
									<view class="text">
										<text style="font-size: 28rpx;display: block;">{{item.mc}}</text>
										<text style="font-size: 20rpx;display: block;">使用时间：{{item.createTime}}</text>



									</view>
								</view>
								<view class="right">
									<view class="text">
										<text
											style="font-size: 28rpx;display: block;visibility: hidden;">checkbox</text>
										<text style="font-size: 20rpx;display: block;">备注：{{item.bz}}</text>
										<!-- <text style="font-size: 20rpx;display: block;">剩余数量：10</text>
										<text style="font-size: 20rpx;display: block;">单位：包</text> -->
									</view>


								</view>
								<!-- <checkbox :value="1" checked style="position: absolute;right: 0;top: 0;" /> -->
							</view>

						</uni-swipe-action-item>

					</uni-swipe-action>
				</view>
			</view>

			<uni-load-more :status="status" @clickLoadMore="clickLoadMore" :contentText="contentText" />
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change" class="goodsPopup">
			<view class="header">
				物资盘点
			</view>
			<view class="popup-content">



				<uni-forms :modelValue="formData">
					<uni-forms-item label="物资名称" name="mc">
						<uni-easyinput type="text" v-model="formData.mc" placeholder="请输入物资名称" disabled/>
					</uni-forms-item>
					<uni-forms-item label="当前数量" name="qsl">
						<uni-easyinput type="text" v-model="formData.qsl" placeholder="请输入当前数量" disabled/>
					</uni-forms-item>
					<uni-forms-item label="盘点数量" name="hsl">
						<uni-number-box @change="changeValue" v-model="formData.hsl" />
					</uni-forms-item>
					<uni-forms-item label="备注" name="bz">
						<uni-easyinput type="textarea" v-model="formData.bz" placeholder="请输入备注" />
					</uni-forms-item>

				</uni-forms>
				<view class="fixedBottom">

					<button class="cancel" @click="cancel()">取消</button>
					<button class="trueDecide" @click="trueDecide()">确定</button>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import {
		toast,
		signOut,
		getStorageSync,
		useRouter
	} from '../../utils/utils.js'
	import {getGoodsList,getUseGoodsList,InventoryGoods,InventoryRecords} from '../../api/goods.js'
import { log } from '../../common/util.js'
	export default {

		data() {
			// 病情判断，体征录入，入出量记录，生命体征，物资信息列表，入出量，药房捡药，物资消耗，检验，物资查看，医嘱执行，后送执行，日常护理记录，结果录入，检查，输血记录，伤员接收，伤员护理记录，套餐医嘱，扫一扫，扫码结果
			return {
				// 盘点弹窗表单
				formData: {
					mc: null,
					qsl: null,
					hsl: 0,
					bz: null,
					zsl:null,
					id:null
				},
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '~别拉了，到底了~'
				},
				styles: {},
				show: true,
				modeClass: 'fade',
				searchValue: null,
				isSearch: false,
				currentIndex: 0,
				options: [
				{
					text: '盘点',
					style: {
						backgroundColor: '#ffaa7f',
						height: '80px'
					}
				}, 
				
				],
				legend: [{
						color: '#ff0000',
						text: '物资'
					},


					{
						color: '#ffff00',
						text: '使用记录'
					}
				],
				// 物资数据
				goodsData:[],
				// 物资使用记录
				useGoodsData:[],
				goodsParams:{pageNum:1,pageSize:10},
				useGoodsParams:{pageNum:1,pageSize:10}
			}
		},
		onLoad() {

			this.initGoods()
			this.loadUseGoodsList()
		},
		onReachBottom() {
			this.status = 'loading'
			if(this.currentIndex){
				this.useGoodsParams.pageNum ++ 
				this.loadUseGoodsList()
			}else{
				
				this.goodsParams.pageNum ++ 
				this.initGoods()
			}
			
		},
		onPullDownRefresh() {
			
			if(this.currentIndex){
				this.useGoodsParams.pageNum = 1
				this.loadUseGoodsList()
			}else{
				
				this.goodsParams.pageNum = 1
				this.initGoods()
			}
		},
	
		methods: {
			// 物资列表
			initGoods(){
				
				getGoodsList(this.goodsParams).then(res=>{
					
					if(!res.rows.length){
						this.status = 'no-more'
					}else{
						this.status = 'more'
					}
					if(this.goodsData.length){
						this.goodsData.push(...res.rows)
					}else{
						this.goodsData = res.rows
					}
					 uni.stopPullDownRefresh();
				})
			},
			// 物资使用记录
			loadUseGoodsList(){
				getUseGoodsList(this.useGoodsParams).then(res=>{

					
					if(!res.rows.length){
						this.status = 'no-more'
					}else{
						this.status = 'more'
					}
					if(this.useGoodsData.length){
						this.useGoodsData.push(...res.rows)
					}else{
						this.useGoodsData = res.rows
					}
					 uni.stopPullDownRefresh();
				})
			},
			openRecord(item){
				useRouter('/pages/goodsManager/detail',{
					wzId:item.id,
					mc:item.wzname
				},'navigateTo')
			},
			onChange(e) {
				this.status = e.detail.value
			},
			clickLoadMore(e) {
				uni.showToast({
					icon: 'none',
					title: "当前状态：" + e.detail.value
				})
			},
			back() {
				useRouter('/pages/index/index', {}, 'switchTab')

			},
			changeHandle(index) {
				this.currentIndex = index
			},
			openDetail() {
				uni.navigateTo({
					url: '/pages/doctorsAdvice/detail'
				})
			},
			handle(type) {
				this.show = !this.show
				this.modeClass = type
				this.isSearch = !this.isSearch
			},
			// 盘点确认
			trueDecide(){
				InventoryGoods(this.formData).then(res=>{
					toast(res.msg)
					this.$refs.popup.close();
				})
			},
			onClick(e,item) {
				console.log(e);
				console.log(item);
				const index = e.index
				switch (index) {
					case 1:
						break;
					default:
					setTimeout(() => {
						this.formData.qsl=item.sysl
						this.formData.mc=item.wzname
						this.formData.zsl=item.zsl
						this.formData.id=item.id
						this.$refs.popup.open('bottom');
					}, 500)	
				}
			},
			change() {
				console.log(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
		position: relative;

	}

	.goodsPopup {
		

		.header {
			height: 108rpx;
			width: 100%;
			// background-color: #23440d;
			color: #333;
			text-align: center;
			line-height: 108rpx;
			box-shadow: inset 0rpx -4rpx 4rpx #EFEFEF;
			font-weight: 600;
			font-size: 32rpx;
		}

		.popup-content {
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 100%;
			background-color: #fff;



			.fixedBottom {
				display: flex;
				align-items: center;

				.cancel {

					width: 100%;
					background-color: #23440d;
					color: #FFFFFF;
					border-radius: 50rpx;
				}

				.trueDecide {

					width: 100%;
					background-color: #23440d;
					color: #FFFFFF;
					border-radius: 50rpx;
				}
			}

		}
	}





	.fixed-bottom {
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 36rpx;

		button {
			background-color: #3f6212;
			border-radius: 50rpx;
			color: #FFFFFF;
		}
	}

	::v-deep.uni-navbar__content_view {
		font-size: 28rpx;
	}

	::v-deep.uni-navbar-btn-text>uni-text {
		font-size: 28rpx !important;
		font-weight: 500;
	}

	::v-deep.uni-navbar__header-container {
		display: flex;
		flex: 1;
		padding: 0 10px;
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}

	.input-view {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #efefef;
		border-radius: 50rpx;
		height: 54rpx;

		.input-uni-icon {
			display: inline-block;
			text-indent: 20rpx;
		}

		.nav-bar-input {
			// display: inline-block;
			// padding: 10rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			height: 24rpx;
		}
	}

	.container {
		.legend {
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			z-index: 100;

			.legend-item {
				text {
					font-size: 18rpx;
					margin-bottom: 8rpx;
				}

				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
			}
		}

		.tabs {
			box-shadow: inset 0rpx 44rpx 102rpx #efefef;
			height: 88rpx;
			// padding-top: 100rpx !important;
			line-height: 88rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			position: relative;

			.tabs-item {
				display: inline-block;
				margin-left: 38rpx;

				&:first-child {
					margin-left: 0;

				}

			}

			.tabs-bottom-line {
				width: 40rpx;
				height: 4rpx;
				background-color: #8EBC8B;
				position: absolute;
				bottom: 0;
				left: 40rpx;
				transition: all ease-in-out .3s;
				border-radius: 2rpx;
				right: 0;

			}
		}

		.box-group {

			padding: 30rpx;
			box-sizing: border-box;

			.box-item {

				border: 1px solid #8EBC8B;
				background-color: #FFFFFF;
				width: 100%;
				// height: 100rpx;
				// padding: 20rpx 0;
				border-radius: 4rpx;
				box-shadow: 10rpx 0 1rpx #8EBC8B inset; //#DAA521 #F18180 #BA56D4
				margin-bottom: 10rpx;

				.action-item {
					// 	height: 102rpx;
					// 	line-height: 1.7;
					// 	background-color: #fefefe;
					// 	box-shadow:inset 0rpx 44rpx 102rpx #efefef;


					.list {
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							.text {
								line-height: 1.5;
								font-size: 16rpx;
								padding: 18rpx 0;
							}
						}

						.right {
							font-size: 18rpx;
							line-height: 1.5;
						}
					}
				}
			}
		}

	}
</style>